import React,{ Component } from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet,
  View,
  Text,
  TextInput,
  Alert,
  TouchableOpacity,
  Dimensions,
  Image
} from 'react-native';
import Md5 from "react-native-md5";
import Toast from 'react-native-easy-toast';

import Axios from '../../axios';
import StorageUtil from '../../common/storageUtil';

var width = Dimensions.get('window').width;

export default class SignInScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {user_text: '',pass_text: ''};
  }

  render() {
    return (
      <View style={LoginStyles.container}>
        <Image
          source={require('../../assets/images/logo.png')}//项目中的图片
          style={LoginStyles.logoImg}
        />
        <TextInput
          ref='userText'
          placeholder="账号"
          underlineColorAndroid={'transparent'}//去掉下划线
          style={LoginStyles.username}
          autoCapitalize='none'
          //将文本写入state
          onChangeText={(user_text) => this.setState({user_text})}
        />
        <TextInput
          ref='passText'
          placeholder="密码"
          secureTextEntry={true}//隐藏输入内容
          underlineColorAndroid={'transparent'}
          style={LoginStyles.username}
          autoCapitalize='none'
          onChangeText={(pass_text) => this.setState({pass_text})}
        />
        <TouchableOpacity
          activeOpacity={0.5} //点击时的透明度

          onPress={this._signInAsync}>
            <View style={LoginStyles.loginBtn}>
              <Text style={LoginStyles.loginBtnTxt}>
                登录
              </Text>
            </View>
        </TouchableOpacity>
        <Toast
          ref="toast"
          position="bottom"
          positionValue={460}
          fadeInDuration={750}
          fadeOutDuration={1000}
          opacity={0.8}
        />
      </View>
    );
  }

  _signInAsync = ()=>{
    if( !this.state.user_text ){
      this.refs.toast.show("请输入帐号", 3);
      this.refs.userText.focus();
      return false;
    }

    if( !this.state.pass_text ){
      this.refs.toast.show("请输入密码", 3);
      this.refs.passText.focus();
      return false;
    }

    Axios.login({
      url:'login',
      data:{
        loginCode:this.state.user_text,
        password:Md5.hex_md5(Md5.hex_md5(this.state.pass_text).toUpperCase()+"2ICiu@Tf").toUpperCase()
      }
    }).then((res)=>{
      //console.log("login="+JSON.stringify(res));
      //console.log("USERPRIVILEGED="+JSON.stringify(JSON.parse(res.USERPRIVILEGED)));
      //console.log("USERINFO="+JSON.stringify(JSON.parse(res.USERINFO)));

      const userprivileged = JSON.parse(res.USERPRIVILEGED);
      const userInfo = JSON.parse(res.USERINFO);
      const userCollect = JSON.parse(res.USER_COLLECT);

      try{
        StorageUtil.setItem(global.Constants.USER_ROLEDATA, userprivileged.roleDataVos);
        StorageUtil.setItem(global.Constants.AREADIC_LIST, userprivileged.areaDicList);
        StorageUtil.setItem(global.Constants.CITYDIC_LIST, userprivileged.cityDicList);
        StorageUtil.setItem(global.Constants.PROVINCEDIC_LIST, userprivileged.provinceDicList);
        StorageUtil.setItem(global.Constants.DEPART, userprivileged.departVo);
        StorageUtil.setItem(global.Constants.USER_INFO, userInfo);
        StorageUtil.setItem(global.Constants.USER_COLLECT, userCollect);
      }catch( err ){
        console.log("初始化用户信息异常:"+err);
      }

      this.props.navigation.navigate('App');

    });
  }
}

const LoginStyles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center'
    },
    logoImg: {
        width:100,
        height:108,
        alignSelf:'center',//设置子控件的位置居中
        marginBottom:60
    },
    username: {
        width:width-100,//居中，宽度为屏幕宽度-32，这样左右都有16的边距
        borderRadius: 20,//输入框边界圆角度数
        borderColor: '#f54545',//输入框边界颜色
        marginBottom:16,
        paddingLeft:20,//这里是为了在圆角之后输入
        paddingRight:20,
        fontSize:16,
        padding:0,//去掉Android默认的padding
        borderWidth: 1,
        height:40,
        alignSelf:'center'//自身居中
    },
    loginBtn :{
        width:width-100,
        height:40,
        borderRadius: 20,//按钮圆角
        alignSelf:'center',
        borderColor: '#f54545',
        borderWidth:1,
        //color:'#f54545',
        backgroundColor:'#f54545',
        marginTop:20,
        //fontSize:16,
        justifyContent:'center',
        alignItems:'center'
    },
    loginBtnTxt:{
      color:'#fff',
      fontSize:18
    }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
